<!DOCTYPE html>
<html lang="zh">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/order-confirm.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
</head>

<body>
<div class="wrap">
    <!-- 头部 start -->
    <header class="header_bar">
        <a href="shopcart.html">
            <div class="header_bar_back"></div>
        </a>
        <div class="header_bar_title">确认订单</div>
    </header>
    <!-- 头部 end -->
    <div class="container" id="app">
        <!-- 订单信息 start -->
        <div class="order-address">
            <h5>配送至：</h5>
            <a href="address.html">
                <div class="address">
                    <p>北京昌平区立水桥南1号</p>
                    <p>李雷雷 13161626306</p>
                    <span class="iconfont icon-youjiantou"></span>
                </div>
            </a>
        </div>

        <h3>永辉超市</h3>

        <ul class="order-detail">
            <li v-for="item in cartItems" :key="item.id">
                <div class="goods">
                    <img :src="item.image">
                    <p>{{ item.name }} x {{ item.count }}</p>
                </div>
                <p>&#165; {{ (item.price * item.count).toFixed(2) }}</p>
            </li>
        </ul>

        <div class="order-cost">
            <p>配送费</p>
            <p>&#165; {{ deliveryFee }}</p>
        </div>

        <!-- 合计部分 -->
        <div class="total">
            <div class="total-left">
                总计：{{ totalPrice.toFixed(2) }} 元
            </div>
            <div class="total-right" @click="goToPayment">
                去支付
            </div>
        </div>
    </div>
</div>
</body>

<script>
    // 创建Vue实例
    var app = new Vue({
        el: '#app',
        data: {
            cartItems: [],
            deliveryFee: 6
        },
        methods: {
            goToPayment() {
                // 保存订单信息到localStorage
                const orderData = {
                    items: this.cartItems,
                    totalPrice: this.totalPrice,
                    deliveryFee: this.deliveryFee,
                    status: 'pending',
                    date: new Date()
                };
                localStorage.setItem('currentOrder', JSON.stringify(orderData));

                // 跳转到支付页面
                location.href = 'payment.html';
            }
        },
        computed: {
            totalPrice: function() {
                // 计算商品总价
                var goodsTotal = this.cartItems.reduce((sum, item) => sum + (item.price * item.count), 0);
                // 添加配送费
                return goodsTotal + this.deliveryFee;
            }
        },
        mounted: function() {
            // 从localStorage加载购物车数据
            const savedCartItems = localStorage.getItem('cart');
            if (savedCartItems) {
                this.cartItems = JSON.parse(savedCartItems);
            } else {
                console.log('购物车为空');
                this.cartItems = [];
            }
        }
    })
</script>
<!-- 订单信息 end -->
</div>
</div>
</body>

</html>